<template>
  <div class="list">
    <p class="list-title">{{ infoList.title }}</p>
    <p> {{ infoList.subTitle }} </p>
    <div class="list-desc">
      <p>起止日期: {{ infoList.date }}</p>
      <p>执行周期: {{ infoList.range }}</p>
      <p>是否有超时记录: <span :class="{'danger': danger()}">{{ infoList.record }}</span></p>
      <div class="list-footer">
        <van-button size="mini" type="default" class="list-footer-btn" @click="handleClick('info')">任务详情</van-button>
        <van-button size="mini" type="default" class="list-footer-btn" @click="handleClick('exec')">执行任务</van-button>
      </div>
      <van-divider/>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    infoList: {
      type:Object,
      required: true
    }
  },
 
  methods: {
    handleClick(e) {
      this.$emit(e, this.infoList)
    },
    danger() {
      return this.infoList.record === '有超时'
    }
  }
}
</script>
<style lang="less" scoped>
  .list{
    padding: @padding;
    font-size: 13px;
    // &-title {
    //   font-weight: @global-font-weight-bold-zh;
    // }
    &-desc {
      font-size: @global-font-size-desc;
      color:  @font-color;
    }
    &-footer {
      display: flex;
      padding: 20px 0 0;
      justify-content: space-around;
      &-btn {
        background: @background-color;
      }
    }
  }
  ::v-deep .van-divider{
    margin: 2px 0 0 0 ;
    border: 2px solid @background-color;
  }
  .danger{
     color: @danger;
  }
</style>